<template>
  <div class="banner">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="banner4.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="banner5.jpg" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="bottom">
      <a href="#">
        <span class="iconfont icon-dianhua"></span>
        <span>电话预订</span>
      </a>
      <a href="#">
        <span class="iconfont icon-xiazai"></span>
        <span>下载携程</span>
      </a>
      <a href="#">
        <span class="iconfont icon-diqiu"></span>
        <span>Language</span>
      </a>
    </div>
    <div class="foot">
        <a href="#">网站地图</a>
        <a href="#">电脑版</a>
        <p>©2021携程旅行<span>沪ICP备08023580号</span></p>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
export default {};
</script>

<style scoped>
.banner {
  width: 100%;
  background-color: #f4f4f4;
  overflow: hidden;
    margin-bottom: .5rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  float: left;
  line-height: 150px;
  text-align: center;
  height: 1.3rem;
  margin-bottom: .15rem;
}
.my-swipe img {
  width: 100%;
  height: 1.3rem;
}
.banner .bottom {
  height: 0.32rem;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.bottom a {
    display: flex;
    padding: .1rem;
    justify-content: center;
    align-items: center;
    height: .3rem;
    border: 1px solid #999;
    border-radius: .04rem;
}
.bottom a span{
    font-size: .12rem;
}
.foot{
    margin-top: .1rem;
    text-align: center;
    height: .42rem;
    width: 100%;
     color: #666;
}
.foot a{
    color: #666;
   margin: 0 .15rem;
}
.foot p{
    margin-top: .08rem;
}
</style>